<template>
  <div class="bigBox">
    <!-- 显示从接口获取的数据 -->
    <div class="box">
      hello, &nbsp;{{ world }}!
    </div>
    <my-navbar />
    <div class="content-wrapper">
      <div class="content content-min-height">
        <div class="index">
          <carousel-swiper />
          <vip-course />
          <experience-course />
          <mentor-topic />
          <my-banner />
        </div>
      </div>
    </div>
    <foot-content />
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  middleware: 'auth',
  async asyncData({ $axios }) {
    try {
      const res = await $axios.get('/api/oauth/')
      if (res && res.data) {
        // 假设你想从响应数据中获取名为'someField' 的字段并赋值给world
        const world = res.data.hDong_data ? res.data.hDong_data : 'World'
        return { world }
      } else {
        // 处理可能的 没有响应体data 的情况
        console.error('.a 没有接收到有效的响应体data!')
        // 通常，在这种情况下，你可能想返回一个错误 或 默认值
        // 但由于 asyncData 在服务器端运行，你不能直接显示错误给用户
        // 所以你可能想返回一个空对象 或 默认值('World')
        return { world: null }
      }
    } catch (error) {
      console.error('Error fetching data: ', error)
      // 在服务器端发生错误时，通常应该抛出一个错误，以便Nuxt可以处理它
      throw error
    }
  },
  methods: {
    abc() {
      this.$router.push('/abc')
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  color: hotpink;
}

.content-wrapper {
  min-height: calc(100vh - 72px);
  min-width: 1200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-wrapper .content-min-height {
  min-height: 300px;
}

.content-wrapper .content {
  flex: 1;
  position: relative;
}

.index {
  min-width: 1200px;
  position: relative;
  min-height: 500px;
}
</style>
